<template>
  <div class="pb-5">
    <van-nav-bar
      fixed
      placeholder
      z-index="10"
      :title="item.title"
      left-text="返回"
      left-arrow
      @click-left="router.push('/')"
    />
    <div class="xl:w-[1200px] xl:m-auto p-2">
      <div
        class="flex justify-between items-center pb-2 border-b"
        v-if="item.user.nickName"
      >
        <div class="flex items-center">
          <div class="relative">
            <img :src="item.user.avatarUrl" class="w-5 h-5 rounded" alt="" />
            <img
              v-if="item.user.gender == '0'"
              src="@/assets/images/nv.png"
              class="w-1.5 h-1.5 absolute top-[-4px] right-[-4px]"
              alt=""
            />
            <img
              v-if="item.user.gender == '1'"
              src="@/assets/images/nan.png"
              class="w-1.5 h-1.5 absolute top-[-4px] right-[-4px]"
              alt=""
            />
          </div>
          <div class="ml-1">
            <div class="flex items-center mb-1">
              <div class="text-zinc-900 text-base">
                {{ item.user.nickName }}
              </div>
              <x-svg-icon
                v-if="item.user.vip"
                class="w-2 h-2 ml-0.5"
                name="vip1"
              ></x-svg-icon>
            </div>
            <div class="text-zinc-400 text-sm">
              {{ moment(item.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
        </div>
        <van-button
          v-if="userinfo && userinfo.id !== item.user.id"
          size="small"
          plain
          type="primary"
          @click="handleFollow(item)"
        >
          {{ item.isFollow ? "已关注" : "关注" }}
        </van-button>
      </div>
      <!-- <div class="text-lg mt-4 mb-1 text-zinc-900">
        {{ item.title }}
      </div> -->
      <div class="mb-2">
        <!-- <div
          v-html="item.content"
          class="text-sm text-zinc-600 editor-content-view"
        ></div> -->
        <VMdEditor v-model="item.content" mode="preview"></VMdEditor>
      </div>

      <div class="mb-2" v-if="item.imgs && imgs.length">
        <van-image
          width="100%"
          height="100%"
          v-for="(item, index) in imgs"
          :key="index"
          :src="item"
        />
      </div>
      <div>
        <Comment
          v-if="userinfo && !isMobileTerminal"
          :postid="id"
          @sendComment="sendComment"
        ></Comment>
        <MobileComment
          v-if="userinfo && isMobileTerminal"
          :postid="id"
          @sendComment="sendComment"
        ></MobileComment>

        <CommentList
          @blurChange="blurChange"
          @sendComment="sendComment"
          :postid="id"
          @handleReply="handleReply"
          :commentList="commentList"
          class="mt-3"
        ></CommentList>
      </div>
    </div>
    <div class="fixed bottom-10 right-2 z-10" v-if="userinfo">
      <x-button
        @click="handleLike"
        icon="like"
        class="rounded-full"
        iconColor="#fff"
      ></x-button>
      <x-button
        v-if="userinfo.id === item.user.id"
        @click="edit"
        type="main"
        icon="edit"
        class="rounded-full mt-2 mb-2"
        iconColor="#fff"
      ></x-button>
      <x-button
        v-if="userinfo.id === item.user.id"
        @click="handleDel"
        icon="delete"
        class="rounded-full"
        iconColor="#fff"
      ></x-button>
    </div>
  </div>
</template>

<script setup>
import MobileComment from "./components/MobileComment.vue";
import { isMobileTerminal } from "@/utils/flexible";
import router from "@/router";
import { computed, onMounted, ref } from "vue";
import { getPostsDetails, delReleaseForm } from "@/api/posts.js";
import { setLike } from "@/api/like.js";
import { followUser } from "@/api/follow.js";
import moment from "moment";
import VMdEditor from "@/components/VMdEditor.vue";
import { getList } from "@/api/comment.js";
import { Toast, Dialog } from "vant";
import "vant/es/Dialog/style";
import "vant/es/image-preview/style";
import Prism from "prismjs";
import Comment from "./components/CommentInput.vue";
import CommentList from "./components/CommentList.vue";
import { transTree } from "./utils";
const info = localStorage.getItem("userinfo");
const userinfo = ref(JSON.parse(info));
const item = ref({
  user: {},
  imgs: "",
  id: "",
});
const id = router.currentRoute.value.query.id;
const handleLike = async () => {
  try {
    const res = await setLike({ id });
    Toast.success("成功点赞!");
  } catch (error) {}
};
const getPostsDetailItem = () => {
  getPostsDetails({ id: id }).then((res) => {
    item.value = res;
    setTimeout(() => {
      Prism.highlightAll();
    }, 10);
  });
};
onMounted(() => {
  getPostsDetailItem();
});
const edit = () => {
  router.push({
    path: "/releaseForm",
    query: {
      id: id,
    },
  });
};
const handleFollow = (item) => {
  if (item.isFollow) {
    return;
  }
  const { user } = item;
  followUser({ followuserid: user.id }).then((res) => {
    if (res) {
      Toast.success("关注成功");
      getPostsDetailItem();
    }
  });
};
const handleDel = () => {
  Dialog.confirm({
    title: "提醒",
    message: "确认删除吗?",
  })
    .then(async () => {
      const res = await delReleaseForm({ id });
      Toast.success("删除成功");
      router.push({
        path: "/home",
      });
    })
    .catch(() => {
      // on cancel
    });
};
const imgs = computed(() => {
  return item.value.imgs.split(",");
});
const commentList = ref([]);
const getCommentList = () => {
  getList({ postid: id }).then((res) => {
    const list = transTree(res);
    list.forEach((item) => {
      if (item.children) {
        item.children.forEach((c) => {
          // 相同说明是直接回复的一级评论
          if (c.pid === c.replyid) {
            // TODO
          } else {
            const replyComment = item.children.find((f) => f.id === c.replyid);
            if (replyComment) {
              c.reply = JSON.parse(JSON.stringify(replyComment));
            }
          }
        });
      }
    });
    commentList.value = list;
  });
};
getCommentList();
const sendComment = (val) => {
  getCommentList();
};

const handleReply = (row) => {
  commentList.value.map((item) => {
    if (item.id == row.id && !item.isShowInput) {
      item.isShowInput = true;
    } else {
      item.isShowInput = false;
    }
    if (item.children) {
      item.children.forEach((f) => {
        if (f.id == row.id && !f.isShowInput) {
          f.isShowInput = true;
        } else {
          f.isShowInput = false;
        }
      });
    }
  });
};
// 失去焦点 隐藏
const blurChange = () => {};
</script>

<style lang="scss" >
</style>